<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Film</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <style>

        #app{
            width: 85%;
            height:100%;
            margin: 0 auto;
            border: 1px solid lightblue;
        }

        .login{
            margin-left: 15%;
        }

        .film{
            float: left;
            margin-top: 30px;
        }

        .chat{
            width: 200px;
            height: 395px;
            border: 2px solid lightblue;
            margin-left: 20px;
            margin-top:30px;
            float: left;
        }

        .chat-box{
            overflow-y: auto;
            height: 340px;
        }

        .content{
            margin: 0 auto;
            height: 500px;
            width: 1048px;
            border: 2px solid lightgreen;
        }

        .chat-input{
            width: 210px;
            height: 30px;
            margin-top: 10px;
        }

        .chat-message-content{
            margin-top:10px;
            height: auto;
            border: 1px solid rgb(239, 71, 71);
        }
    </style>
</head>
<body>
<div id="app">
    <div class="login" v-if="loginflag">
        <h2>Log in</h2>
        <form name="myform">
            <table>
                <tr>
                    <td class="labname"><label for="username">用户名：</label></td>
                    <td><input type="text" name="username" placeholder="请输入用户名"
                               id="username" v-model="username"/></td>
                </tr>
                <tr>
                    <td class="labname"><label for="pwd">密码：</label></td>
                    <td><input type="password" name="pwd" placeholder="请输入密码"
                               id="pwd" v-model="pwd"/></td>
                </tr>
                <tr>
                    <td class="labname"><label for="yzm">验证码：</label></td>
                    <td><input type="text" name="yzm" placeholder="请输入验证码"
                               id="yzm" v-model="valcode"/></td>
                    <td><img @click="refreshImg()" src="code.action" id="yzm_img" alt="valcode"/>点击刷新</td>
                </tr>
            </table>
        </form>
        <input type="button" value="login" class="btn" id="btn" @click="login()"/>
        <input type="button" value="register" class="btn"@click="register()"/>
    </div>

    <span id="exitspan" v-if="islogin" style="margin-left: 15%;">
            欢迎您：{{username}}<a href="" @click.prevent="logout()">退出</a>
        </span>

    <div class="content">
        <div class="film">
            <video id="video" controls width="800">
                <source src="static/video.mp4" type="video/mp4">
            </video>
        </div>

        <div class="chat">
            <div class="chat-box">
                <div class="chat-content">
                    <div class="chat-message">
                        <div class="chat-message-content">
                            <p style="line-height:0">Hi {{username}}</p>
                        </div>
                        <div class="chat-message-content" v-for="(message,index) of message">
                            <span style="font-size:10px">{{message.sender}} : {{message.date}}</span>
                            <textarea rows="5" cols="23" readonly >
                                {{message.data}}
                            </textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chat-input">
                <input id="messageInput" type="text" v-model="messageInput" placeholder="Type a message">
                <button @click="addMessage()">Send</button>
            </div>
        </div>
    </div>
</div>

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            username: 'a',
            pwd:"a",
            valcode:"",
            islogin:false,
            loginflag:true,
            messageInput:"",
            message:[]
        },
        methods:{
            login:function () {
                var params=new URLSearchParams();
                params.append("op","login");
                params.append("username",this.username);
                params.append("pwd",this.pwd);
                params.append("valcode",this.valcode);
                axios.post("resuser.action",params).then(data=>{
                    let result = data.data;
                    if (result.code==0){
                        alert("登录失败，原因:"+result.msg);
                        return;
                    }
                    this.username = result.data.username;
                    this.loginflag = false;
                    this.islogin = true;
                    alert("登录成功");
                });
            },
            logout:function () {
                axios.post("resuser.action?op=logout").then(data=>{
                    var result=data.data;
                    if (result.code==1){
                        this.username='';
                        this.pwd='';
                        this.valcode='';
                        this.islogin=false;
                        this.loginflag=true;
                    }
                });
            },
            checklogin(){
                var params =new URLSearchParams();
                params.append("op","checkLogin");
                return axios.post("resuser.action",params);
            },
            register:function () {
                var params = new URLSearchParams();
                params.append('op', 'register');
                params.append('username', this.username);
                params.append('pwd', this.pwd);
                params.append('valcode', this.valcode);
                axios.post("resuser.action", params).then( result=> {
                    let data = result.data;
                    if(data.code == 1) {
                        this.username = data.username;
                        alert("注册成功");
                    }else {
                        alert(data.msg);
                    }
                })
            },
            refreshImg:function () {
                // 通过event事件对象的target属性获取当前正在点击的img标签
                var imgEle = event.target;
                // 设置img标签的src属性
                imgEle.src = "code.action?" + Math.random();
            },
            addMessage:function(){
                if(this.messageInput==""){
                    alert("请输入内容");
                    return;
                }
                var params = new URLSearchParams();
                params.append('op', 'sendMessageOp');
                params.append('message', this.messageInput);
                axios.post("message.action", params).then( res=> {
                    result = res.data;
                    if(result.code == 1) {
                        this.messageInput = "";
                    }else {
                        alert(result.msg);
                    }
                });
            },
            getAllmessage(){
                var params=new URLSearchParams();
                params.append("op","getAllMessage");
                return axios.post("message.action",params);
            }
        },
        mounted(){
            axios.all([this.checklogin(),this.getAllmessage()]).then(axios.spread( function(d1,d2){
                if(d1.data.code===1){
                    console.log(d1);
                    vm.$data.islogin=!vm.$data.islogin;
                    vm.$data.loginflag=false;
                    vm.$data.user.uname=d1.data.data.uname;
                }

                if(d2.data.code===1){
                    console.log(d2);
                    vm.$data.message=d2.data.data;
                }
            }))
        },
    });

    setInterval(()=>{
        var params =new URLSearchParams();
        params.append("op","getAllMessage");
        axios.post("message.action",params).then((result)=>{
            if(result.data.code===1){
                vm.$data.message=result.data.data;
                console.log(vm.message);
            }
        })
    },1000)
</script>
</body>
</html>